<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01过渡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
        }
        .box2{
            background-color: #bfa;
            transition: all 1s;
            /* transition: width 2s; */
            /* 
                过渡（transition）
                    通过过渡可以指定一个属性发生变化时的切换方式
                    通过过渡可以创建一些非常好的效果，提升用户的体验

                    transition-property 指定要执行过渡的属性
                                            多个属性用逗号隔开，如果所有都要过渡，用all
                                            大部分属性都支持过渡（能计算的值）
                    transition-duration 指定过渡效果的持续时间
                                            如果不同效果不同值，用逗号隔开
                    transition-timing-function 过渡的时序函数：指定过渡的执行方式
                                                可选值：
                                                        ease默认值：慢速开始，先加速再减速
                                                        linear 匀速运动
                                                        ease-in 慢速开始，一直加速
                                                        ease-out 快速开始，一直减速
                                                        ease-in-out 先加速后减速
                                                        cubic-bezier() 指定时许函数
                                                        steps（） 分步执行过渡效果
                                                            第二个值的可选值：end 在时间结束时执行过渡
                                                            第二个值的可选值：start 在时间开始时执行过渡
                    transition-delay 过渡效果的延迟

                    transition 可以同时设置过渡相关的所有属性，就只有一个要求：
                                    如果要写延迟，则两个事件中，第一个是持续时间，第二个是延迟
            */
            /* transition-property: width,height,background-color; */
            transition-duration: 1s;
            /* transition-timing-function: steps(120); */
            transition-delay: 1s;
        }
        .box3{
            background-color: aqua;
            transition-property: all;
            transition-duration: 1s;
        }
        .box1:hover div{
            /* width: 200px; */
            /* height: 200px; */
            /* background-color: orange; */
            margin-left: 700px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>